import React, { useState } from 'react'
import { css } from '@/utils/index'
import SectionTitle from './SectionTitle'

export default function Comp(props: any) {
  const { LG } = props
  const [ind, setInd] = useState(0)

  const img =
    'https://preview.newsharing.com/WebUpload/2023/0902/6877b01dfa145ac4525175afef493a20/6877b01dfa145ac4525175afef493a20_640x396.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDGSncu1dzcrxmkBFqkRDUMg8JU0r-rtDUY4Edzols5AToRyVQ1SXPm479ZfKyfq1Y%26q-sign-time%3D1708778326%3B1708876800%26q-key-time%3D1708778326%3B1708876800%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D4cdabc265a3f11c0eaaef1536653ab43140180fa&x-cos-security-token=QhLjbaVcvLEmOG5KXQLerYbRub12ZsRa812ef4183a245651d39338d7e4d092f1ypZ9zF0RDtfvIczRPx8OWE4BBlKQHGgzASfOCcSHn9gIkg1KI1xvyhHBivLu2ARcweiv7yKKxjqV1wY9u7e__KloKq6smgdvwFJFvz1oY3Txp9uJXzBuP1OlEDeNjAcu3t2CB_SBiNO9SvqERk5ET42uzjAUhLlE_3QuGzQVRa0kk3I1rJ4j3CbEnLJoIoHulbgX7h9LurCrjHOFRr4oUvr0htRrkUQ5HewZHMlKFK-Zw17JwYAtPTw9YhOYhKJjfajnNaMkIxlEghRMJ4_PLILQ6EbOo-u5r3dPz4uF8u7CD-Fq-NdYyO92lizMBxDNh88rqWsYSADuCDF9igOZSlickHAzCrYpax7YVSn-3UEn1mOlaKZFTYjegflP-a6OuxbDAqREOToo8mlJAWXCRmqEq1DNXQUGMnsH6S0kCgM'
  const list = [
    { img, name: 'orderService01' },
    { img, name: 'orderService02' },
    { img, name: 'orderService03' },
    { img, name: 'orderService04' }
  ]

  const onTap = (item: Partial<INewItem>) => {
    console.log('onTap', item)
  }

  return (
    <div className='order-service'>
      <SectionTitle title={LG.orderService} />

      <p className='order-service-title'>{LG.orderServiceTitle}</p>
      <p className='order-service-desc'>{LG.orderServiceDesc}</p>

      <img className='is-click-hand' src={list[ind].img} onClick={() => onTap(list[ind])} />
      <div className='l-f ai-c jc-sa'>
        {list.map((item, i) => (
          <div
            key={item.name}
            onClick={() => setInd(i)}
            className={css('item l-f d-c jc-c is-click-hand', { active: ind === i })}
          >
            <p className='num'>0{i + 1}</p>
            <p className='name'>{LG[item.name]}</p>
            {ind === i ? <div className='line' /> : null}
          </div>
        ))}
      </div>
    </div>
  )
}
